<template>
    <div>
        <div class="banner">
            <div class="wrapper">
                <img src="~/assets/img/page-banner.png" alt=""/>
            </div>
        </div>
        <!--两列布局-->
        <div class="wrapper tag-item">
            <div class="fl left-list">
                <p class="full-info">为了获取更好的体验 请 <a href="makeFriends-edit.html" target="_blank">完善兴趣信息</a><span
                    class="sui-icon icon-tb-close close"></span></p>
                <div class="friend-dating-list">
                    <ul class="friends">
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="cafe-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating1.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe cafe"><i class="fa fa-coffee"
                                                                   aria-hidden="true"></i> 喝咖啡</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="cafe">喝咖啡</span> <b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point"> 他刚刚分享了XXX文章</p>
                                <p class="desc"> 推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="eat-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating2.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe eat"><i class="fa fa-cutlery"
                                                                  aria-hidden="true"></i> 吃饭</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="eat">吃饭</span> <b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point">他刚刚分享了XXX文章</p>
                                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="travel-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating3.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe travel"><img src="~/assets/img/widget-fa-travel.png"
                                                                       alt=""/> 旅行</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="travel">旅行</span><b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point">他刚刚分享了XXX文章</p>
                                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="sing-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating3.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe sing"><img src="~/assets/img/widget-fa-sing.png" alt=""/> K歌</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="sing">K歌</span><b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point">他刚刚分享了XXX文章</p>
                                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="movie-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating4.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe movie"><img src="~/assets/img/widget-fa-movie.png"
                                                                      alt=""/> 看电影</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起<span class="movie">看电影</span><b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point">他刚刚分享了XXX文章</p>
                                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                        <li class="friend-item">
                            <div class="fl photo">
                                <span class="other-more"></span>
                                <div class="img">
                                    <img src="~/assets/img/widget-dating5.png" alt=""/>
                                </div>
                                <div class="tag">
                                    <span class="tag-cafe other"><img src="~/assets/img/widget-fa-other.png" alt=""/> 其他</span>
                                </div>
                            </div>
                            <div class="fl content">
                                <p class="title"><span class="name">全栈大牛</span> 邀你一起 <span class="other">其他</span><b
                                    class="bold">匹配度 96%</b></p>
                                <p class="aa"><span class="money"> 24岁 | 金牛座 | 教育 | 软件工程师</span></p>
                                <p class="point">他刚刚分享了XXX文章</p>
                                <p class="desc">推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。</p>
                            </div>
                            <div class="fr xy">
                                <ul>
                                    <li><i class="like sui-icon icon-tb-like"></i></li>
                                    <li><i class="close sui-icon icon-tb-roundclose"></i></li>
                                    <li><i class="message sui-icon icon-tb-comment"></i></li>
                                </ul>
                            </div>
                            <div class="clearfix"></div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fl right-tag">
                <div class="friend-info-card">
                    <div class="card">
                        <div class="photo-name">
                            <img src="~/assets/img/widget-photo.png" alt=""/>
                            <div class="name-edit">
                                <p><span class="name">用户名</span> <span class="edit">编辑兴趣资料</span></p>
                                <p>认证</p>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="like">
                            <span class="like1">喜欢　<i class="num">400</i></span>
                            <span>被喜欢　<i class="num">5</i></span>
                        </div>
                    </div>
                </div>
                <div class="block-btn">
                    <p>约一约有趣的人，会一会好的时光！</p>
                    <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会</a>
                </div>
                <div class="rank">
                    <div class="head">
                        <h3 class="title">排行榜</h3>
                    </div>
                    <div class="rank-list">
                        <ul class="rank">
                            <li><span class="fl dating">喝咖啡</span> <span class="fr cafe">102258</span></li>
                            <li><span class="fl dating">吃饭</span> <span class="fr eat">9878</span></li>
                            <li><span class="fl dating">看电影</span> <span class="fr movie">2564</span></li>
                            <li><span class="fl dating">旅行</span> <span class="fr travel">897</span></li>
                        </ul>
                    </div>
                </div>
                <div class="friend-line-card">
                    <div class="card">
                        <p>找个合适的参加一场线下活动</p>
                    </div>
                </div>
                <div class="friend-line-card">
                    <div class="card">
                        <p>找个合适的参加一场线下活动</p>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</template>

<script>
    import "~/assets/css/page-sj-makeFriends-index.css"

    export default {
    }
</script>

<style scoped>

</style>
